@use 'sass:map';
@use '@angular/material' as mat;

@mixin color($config-or-theme) {
  $config: mat.get-color-config($config-or-theme);
  $background: map-get($config, background);
  $primary: map-get($config, primary);

  .ngm-color-input {
    .mtx-colorpicker-toggle {
      button {
        border: 1px dashed var(--ngm-color-surface-container-high);
        border-radius: 100%;
      }
    }
  }
}

@mixin density($config-or-theme) {
  .ngm-color-input.ngm-density__compact, .ngm-density__compact .ngm-color-input {
    .mtx-colorpicker-toggle {
      transform: scale(0.8);
      transform-origin: right top;
    }
  }
}

@mixin theme($theme) {
  $density: mat.get-density-config($theme);

  $color-config: mat.get-color-config($theme);
  @if $color-config != null {
    @include color($theme);
  }

  $typography-config: mat.get-typography-config($theme);
  @if $typography-config != null {
    @include typography($theme);
  }

  @if $density != null {
    @include density($density);
  }
}
